<!--
 * @Description: 主题切换
 * @Author: bxsdhx
 * @Date: 2024-02-23 12:41:26
 * @LastEditTime: 2024-02-23 13:12:50
 * Copyright (C) 2024 bxsdhx. All rights reserved.
-->
<template>
  <ElSwitch
    v-model:model-value="useAppStore.isThemeDark"
    @change="useAppStore.setThemeDark"
    :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
    class="switch-theme"
  ></ElSwitch>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { ElSwitch } from "element-plus";
import { Sunny, Moon } from "@element-plus/icons-vue";
import store from "@/store";
const useAppStore = store.useAppStore();
onMounted(function () {
  useAppStore.setThemeDark(useAppStore.isThemeDark);
});
</script>
<style scoped lang="scss">
.switch-theme {
  --el-switch-on-color: var(--el-color-primary);
  --el-switch-off-color: var(--el-color-primary);
}
</style>
